(WIP) Live coding wth VSCode setup for classes

How to setup a live coding session with vscode for applications in class

Abstract

Live coding isn’t new at all, it has been used for a long time in music, for example, and also in programming, with team programming, pair programming, etc. It should also be used in teaching, as it is a great way to show how to write code, and to hone the skills of the students.

This is especially useful for applications in class. It allows you, one or several students to live code and share the screen with the rest of the class. It is the modern version of the “going to the blackboard” for code writing.

Student Setup

First, students must have set up their client side like described there, just ignore the part about the jupyterhub.

Now for the teacher, you need the same set of vscode extensions as your students (obviously) and an additional setup to let you “drive” the session.

Warning

Do not forget to put the session in read-only when you launch the liveshare session, otherwise all hell will break loose, literally. You do NOT want your students to be able to edit your code, all at the same time.

Teacher Setup

Put the following in your .vscode/settings.json

    "liveshare.alwaysFollowHost": true,
    "liveshare.anonymousGuestApproval": "accept",
    "liveshare.increasedGuestLimit": true,
    "liveshare.autoShareTerminals": false,
    "liveshare.guestApprovalRequired": false,
    "liveshare.showVerboseNotifications": false,
    "liveshare.notebooks.allowGuestExecuteCells": false,
    "liveshare.languages.allowGuestCommandControl": false,
    "liveshare.codeLens": true,
    "liveshare.allowGuestTaskControl": false,
    "liveshare.showReadOnlyUsersInEditor": "whileFollowing",

Note

Insist that your students to get a meaningful username for you, otherwise it will be very confusing for you to know who is doing what, and afterward, who did what for potential grading. You really don’t want to wonder who is user-1234567890 or GreatAlmightyWizard.

Now put a specific folder in your current repository which will be used as the “live coding” folder. This is the folder you will share and they will be only able to see (and eventually edit) the files in this folder. I usually name it playground.

```bash # Procedure

Important

You must instist that students launch a new vscode window for the live coding session, as they often don’t understand why they can’t edit the code in their current window.

They should keep a main windom for their owm work, for example with a copy of the applications, their own notebooks, etc.

Tip

In case of python code, you can launch an interactive window side by side with the editing window, using the percent format, wich let you execute of the current cell in the interactive window.

1. Launch the live share session (don’t forget to put it in read-only mode!)
2. Share your screen on the video projector or whatever you use to share your screen with the class
3. Share the link with your students (put it in the chat)
4. Wait for them to join (watch their pseudonyms)
5. When they are all in, you can start the live coding session
6. For one or several students, you can give them the editing control of the session, so they can write code for the class. Right-click on their name in the list of participants and select “Write access”.
7. When their are done, just right-click again and select “Read-only access”.

TODO: add screenshots